import TemplateLink from '@site/src/components/TemplateLink'

# 🔥各个框架的模板

当你配置不对的时候，也可以参考参考, 其中带有 🔥 标志的为推荐使用版本

:::tip
假如你遇到网络问题，无法登陆 `Github` 的时候，你可以使用 `Gitee`。

登陆进 `Gitee` 之后，点击右上角的加号，有一个导入仓库功能。然后你想使用什么模板，你就右键下方模板的link，点击复制链接地址，然后把复制的url，粘贴到`Gitee`导入仓库的 `Git Repository URL` 中去，点击确定导入之后，过几秒仓库就能够同步完成，就可以下载了。
:::

## uni-app

---

### 使用 `uni-app cli` 进行构建 `vscode` 开发

<TemplateLink
  hot
  title="uni-app-vite-vue3-tailwind-vscode-template"
  href="https://github.com/sonofmagic/uni-app-vite-vue3-tailwind-vscode-template"
  repoOwner="sonofmagic"
  repo="uni-app-vite-vue3-tailwind-vscode-template"
/>

<TemplateLink
  title="uni-app-vue2-tailwind-vscode-template"
  href="https://github.com/sonofmagic/uni-app-vue2-tailwind-vscode-template"
  repoOwner="sonofmagic"
  repo="uni-app-vue2-tailwind-vscode-template"
/>

<TemplateLink
  title="monorepo-uniapp-template"
  href="https://github.com/sukbearai/x-dev-uni"
  repoOwner="sukbearai"
  repo="x-dev-uni"
/>

{/* ### 若依移动端 (`hbuilderx` 集成 `tailwindcss`)

<TemplateLink
  hot
  title="若依移动端"
  description="Gitee 地址"
  href="https://gitee.com/sonofmagic/RuoYi-App"
/> */}

### 使用 `hbuilderx` 进行构建和开发

<TemplateLink
  title="uni-app-vue3-tailwind-hbuilder-template"
  href="https://github.com/sonofmagic/uni-app-vue3-tailwind-hbuilder-template"
  repoOwner="sonofmagic"
  repo="uni-app-vue3-tailwind-hbuilder-template"
/>

<TemplateLink
  deprecated
  title="uni-app-vue2-tailwind-hbuilder-template"
  description="架构太过老旧，只能作为集成参考，新项目请勿使用"
  href="https://github.com/icebreaker-template/uni-app-vue2-tailwind-hbuilder-template"
  repoOwner="icebreaker-template"
  repo="uni-app-vue2-tailwind-hbuilder-template"
/>

## tarojs

---

### 使用 `tarojs` 进行构建 `vscode` 开发

<TemplateLink
  hot
  title="taro-react-tailwind-vscode-template"
  href="https://github.com/sonofmagic/taro-react-tailwind-vscode-template"
  repoOwner="sonofmagic"
  repo="taro-react-tailwind-vscode-template"
/>

## native

---

### 原生小程序开发模板

<TemplateLink
  hot
  title="weapp-vite-tailwindcss-template"
  description="weapp-vite 打包"
  href="https://vite.icebreaker.top/guide/"
/>

<TemplateLink
  title="vue-mini-tailwindcss-template"
  description="vue-mini 支持"
  href="https://github.com/sonofmagic/vue-mini-tailwindcss-template"
  repoOwner="sonofmagic"
  repo="vue-mini-tailwindcss-template"
/>

#### 下方的技术架构过于老旧，不推荐

<TemplateLink
  deprecated
  title="native-weapp-tailwindcss-template"
  description="cli 打包"
  href="https://github.com/sonofmagic/native-weapp-tailwindcss-template"
  repoOwner="sonofmagic"
  repo="native-weapp-tailwindcss-template"
/>

<TemplateLink
  deprecated
  title="weapp-tailwindcss-gulp-template"
  description="gulp 打包"
  href="https://github.com/sonofmagic/weapp-tailwindcss/tree/main/demo/gulp-app"
/>

<TemplateLink
  deprecated
  title="weapp-native-mina-tailwindcss-template"
  description="webpack 打包"
  href="https://github.com/sonofmagic/weapp-native-mina-tailwindcss-template"
  repoOwner="sonofmagic"
  repo="weapp-native-mina-tailwindcss-template"
/>

## `tailwindcss@4`

所有的 `tailwindcss@4` 模板都维护在下方的地址，标志为标题带有 `tailwindcss-v4` 字样:

https://github.com/icebreaker-template

## 更多模板

你还可以在项目的根目录的 `demo` 文件夹中，找到各个框架的注册方式。

里面有 `gulp` , `mpx` , `webpack5` , `rax` , `taro-react` , `taro-vue2` , `taro-vue3` , `uni-app vue2 webpack5` , `uni-app vue3 vite` 的项目
